<template>
	<div class="efficiency-analysis">
		<el-row :gutter="18" style="margin-bottom:16px;">
			<el-col :xs="12" :md="6">
				<el-card>
					<div class="stat-title">产能利用率</div>
					<div class="stat-value">{{ metrics.utilization }}%</div>
				</el-card>
			</el-col>
			<el-col :xs="12" :md="6">
				<el-card>
					<div class="stat-title">OEE（设备综合效率）</div>
					<div class="stat-value">{{ metrics.oee }}%</div>
				</el-card>
			</el-col>
			<el-col :xs="12" :md="6">
				<el-card>
					<div class="stat-title">本月班组产量</div>
					<div class="stat-value">{{ metrics.output }} 件</div>
				</el-card>
			</el-col>
			<el-col :xs="12" :md="6">
				<el-card>
					<div class="stat-title">当前良品率</div>
					<div class="stat-value">{{ metrics.passRate }}%</div>
				</el-card>
			</el-col>
		</el-row>

		<el-card>
			<div style="font-weight:bold;margin-bottom:12px;">产能利用率趋势</div>
			<div ref="trendRef" style="width:100%;height:320px;"></div>
		</el-card>
		<el-card style="margin-top:18px;">
			<div style="font-weight:bold;margin-bottom:12px;">班组产量对比</div>
			<div ref="groupRef" style="width:100%;height:320px;"></div>
		</el-card>
	</div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

// 指标模拟数据
const metrics = {
	utilization: 92.4,
	oee: 85.6,
	output: 15800,
	passRate: 98.7
}

// 产能利用率趋势数据（近14天）
const trendData = [
	{ date: '06-01', val: 87 },
	{ date: '06-02', val: 83 },
	{ date: '06-03', val: 89 },
	{ date: '06-04', val: 91 },
	{ date: '06-05', val: 88 },
	{ date: '06-06', val: 92 },
	{ date: '06-07', val: 90 },
	{ date: '06-08', val: 95 },
	{ date: '06-09', val: 93 },
	{ date: '06-10', val: 91 },
	{ date: '06-11', val: 96 },
	{ date: '06-12', val: 94 },
	{ date: '06-13', val: 92 },
	{ date: '06-14', val: 94 }
]

// 班组产量对比
const groupData = [
	{ group: 'A班', value: 4250 },
	{ group: 'B班', value: 3980 },
	{ group: 'C班', value: 3850 },
	{ group: 'D班', value: 3720 }
]

const trendRef = ref()
const groupRef = ref()
let chart1, chart2

function renderTrend() {
	if (!chart1 && trendRef.value) chart1 = echarts.init(trendRef.value)
	if (!chart1) return
	chart1.setOption({
		tooltip: { trigger: 'axis' },
		grid: { left: 44, right: 20, top: 36, bottom: 36, containLabel: true },
		xAxis: { type: 'category', data: trendData.map(d => d.date) },
		yAxis: { type: 'value', min: 0, max: 100, axisLabel: { formatter: '{value}%' } },
		series: [{
			name: '产能利用率',
			type: 'line',
			smooth: true,
			symbol: 'circle',
			data: trendData.map(d => d.val),
			lineStyle: { width: 2, color: '#409EFF' },
			areaStyle: { color: '#E6F7FF' }
		}]
	})
}

function renderGroup() {
	if (!chart2 && groupRef.value) chart2 = echarts.init(groupRef.value)
	if (!chart2) return
	chart2.setOption({
		tooltip: { trigger: 'axis' },
		grid: { left: 44, right: 20, top: 36, bottom: 36, containLabel: true },
		xAxis: {
			type: 'category',
			data: groupData.map(d => d.group)
		},
		yAxis: { type: 'value', minInterval: 1 },
		series: [{
			name: '产量',
			type: 'bar',
			data: groupData.map(d => d.value),
			barWidth: 38,
			label: { show: true, position: 'top' },
			itemStyle: { color: '#67C23A' }
		}]
	})
}

onMounted(() => {
	setTimeout(() => {
		renderTrend()
		renderGroup()
	}, 20)
})
</script>

<style scoped>
.efficiency-analysis {
	padding: 16px;
}

.stat-title {
	font-size: 1em;
	color: #888;
	margin-bottom: 8px;
}

.stat-value {
	font-size: 2em;
	color: #409EFF;
	font-weight: bold;
	text-align: center;
}
</style>
  
